<template>
  <div class="tree-wrapper">
    <h3>Tree</h3>
    <Tree :data="data"></Tree>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import Tree from './components/Tree.vue'
interface ITree {
    name: string
    checked: false
    children?: ITree[]
}
const data = reactive<ITree[]>([
    {
        name: '1',
        checked: false,
        children: [
            {
                name: '1-1',
                checked: false,
            },
            {
                name: '1-2',
                checked: false,
            }
        ]
    },
    {
        name: '2',
        checked: false,
        children: [
            {
                name: '2-1',
                checked: false,
            }
        ]
    },
    {
        name: '3',
        checked: false,
        children: [
            {
                name: '3-1',
                checked: false,
                children: [
                    {
                        name: '3-1-1',
                        checked: false,
                    },
                    {
                        name: '3-1-2',
                        checked: false,
                    }
                ]
            }
        ]
    }
])
</script>
<style lang='scss' scoped>
.tree-wrapper {
    text-align: left;
}
</style>